import React from 'react';
import styled from 'styled-components';

// Styling components with Styled Components

const HeaderContainer = styled.div`
  font-family: 'Open Sans', sans-serif;
  justify-content: space-around;
  position: fixed;
  display: flex;
  margin: 0;
  width: 100%;
`;

const HeaderBrand = styled.div`
  margin: auto 2rem;

  img {
    max-height: 70px;
  }
`;

const HeaderNavbar = styled.ul`
  list-style: none;
  display: inline-flex;
  margin: 2rem;
`;

const NavbarItem = styled.a`
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  color: #c4c4c4;
  margin: auto 0.5rem;

  &:hover {
    color: #fff;
  }
`;

class Header extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      navbarLinks: [
        { label: "Sobre", url: "#about" },
        { label: "Metodologia", url: "#metodology" },
        { label: "Cronograma", url: "#cronogram" },
        { label: "Atividades", url: "#activities" },
      ],
    };
  }

  render() {
    return (
      <HeaderContainer>
        <HeaderBrand>
          <img src="https://dummyimage.com/70x70/121212/fff" alt="A random thing"/>
        </HeaderBrand>
        <HeaderNavbar>
        { /* Using JS .map() to iterate each one of the values in the array */}
          { this.state.navbarLinks.map(link => {
            return (
              <li key={ link.index }>
                <NavbarItem href={ link.url } key={ link.label }>[{ link.label }]</NavbarItem> 
              </li>
            )
          }) }
        </HeaderNavbar>
      </HeaderContainer>
    )
  }
}

export default Header;